<template>
	<view class="viewbox auto m-top50">
		<block v-for="(item,index) in pageData" :key="index">
			<view class="list" v-if="item.vpType == 1">
				<text class="name">{{item.vpName}}</text>
				<input type="text" class="Input" v-model="item.value" :placeholder="`请输入${item.vpName}`"
					:placeholder-style="Pinia.inputPlace" />
			</view>


			<picker mode="selector" :range="item.vpValue" @change="Picker($event,item)" class="picker"
				v-if="item.vpType == 2">
				<view class="sele_list">
					<text class="name">{{item.vpName}}</text>
					<view class="d-flex a-center" :class="item.value?'black':'color'">
						<text class="size30">{{item.value?item.value:'请选择'}}</text>
						<view class="iconfont icon-a-zujian7  h6 p-left10"></view>
					</view>
				</view>
			</picker>


			<view class="list" v-if="item.vpType == 4">
				<text class="name">{{item.vpName}}</text>
				<view class="Input d-flex a-center" :class="item.value?'black':'color'" @click="PopMore(index)">
					<view class="flex-1 ellipsis">{{item.value?item.value:'请选择'}}</view>
					<view class="iconfont icon-a-zujian7 h6 p-left10"></view>
				</view>
			</view>

			<picker mode="date" @change="Picker($event,item)" class="picker" v-if="item.vpType == 5">
				<view class="sele_list">
					<text class="name">{{item.vpName}}</text>
					<view class="d-flex a-center" :class="item.value?'black':'color'">
						<text class="size30">{{item.value?item.value:'请选择'}}</text>
						<view class="iconfont icon-a-zujian7 h6 p-left10"></view>
					</view>
				</view>
			</picker>

			<view class="sele_list" @click="showAddPicker(index,item)" v-if="item.vpType == 6">
				<text class="name">{{item.vpName}}</text>
				<view class="d-flex a-center" :class="item.value?'black':'color'">
					<text class="size30">{{item.value?item.value:'请选择'}}</text>
					<view class="iconfont icon-a-zujian7 h6 p-left10"></view>
				</view>
			</view>





			<view class="Photos m-bot30" v-if="item.vpType == 7">
				<text class="name">{{item.vpName}}</text>
				<view class="row j-centert">
					<view class="rowList" v-for="(sItem,sIndex) in item.Imgs" :key="sIndex">
						<view class="LitImg">
							<image :src="$imgUrls(sItem)" mode="aspectFill" class="wh bor_radius_10"></image>
							<view class="iconfont icon-shanchu1 color size46" @click.stop="DelImg(index,sIndex)">
							</view>
						</view>
					</view>
					<view class="rowList" @click="UploadPhoto(index,7)" v-if="!item.Imgs.length">
						<view class="LitImg flexac">
							<view class="iconfont icon-tianjia color_f2 size100"></view>
						</view>
					</view>

				</view>
			</view>


			<view class="Photos m-bot30" v-if="item.vpType == 8">
				<text class="name">{{item.vpName}}</text>
				<view class="row">
					<view class="rowList" v-for="(sItem,sIndex) in item.Imgs" :key="sIndex">
						<view class="LitImg">
							<image :src="$imgUrls(sItem)" mode="aspectFill" class="wh bor_radius_10"></image>
							<view class="iconfont icon-shanchu1 color size46" @click.stop="DelImg(index,sIndex)">
							</view>
						</view>
					</view>
					<view class="rowList" @click="UploadPhoto(index,8)" v-if="item.Imgs.length < 9">
						<view class="LitImg flexac">
							<view class="iconfont icon-tianjia color_f2 size100"></view>
						</view>
					</view>

				</view>
			</view>


			<view class="listContent" v-if="item.vpType == 3 && times == 1">
				<view class="listBot">
					<text class="name">{{item.vpName}}</text>
					<input type="text" class="Input" v-model="item.value" :placeholder="`请输入${item.vpName}`"
						placeholder-class="place" />
				</view>
				<view class="contentTxt">
					<view class="rows size26 black m-bot20" v-for="(sItem,sIndex) in item.vpValueList" :key="sIndex">
						{{sItem}}
					</view>
				</view>
			</view>

		</block>

	</view>
	<cityPicker :column="3" :default-value="defaultValue" :mask-close-able="true" @confirm="confirm"
		@cancel="visible = false" :visible="visible" />

	<view v-if="show">
		<u-popup :show="show" @close="show = false" round="10">
			<view class="PopUp">
				<text class="row j-centert black size32 bold">{{pageData[Index].vpName}}</text>
				<view class="row m-top30">
					<block v-for="(item,index) in pageData[Index].vpValue" :key="index">
						<view class="popList" @click.stop="selectINT(item)"
							:class="{'popActive':pageData[Index].value.indexOf(item) != -1}">{{item}}</view>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<!-- 
vpType  
  1  单行输入
  2  下拉选择
  3  文本输入
  4  复选框
  5  日期选择
  6  城市级联
  7  单图上传
  8  多图上传

 -->
<script setup>
	import cityPicker from '@/components/cityPicker/cityPicker.vue';
	import { ref, watch, inject, defineProps, onBeforeMount } from 'vue';
	import Http from '@/common/request.js';
	import common from "@/common/common.js";
	import { usePiniaStore } from '@/store/pinia.js';

	const Pinia = usePiniaStore();
	const props = defineProps(['times']);
	const { imgUrls: $imgUrls, Toast, toUrl } = inject('Utils');

	const pageData = ref([]);
	const showadd = ref(0);
	const defaultValue = ref('110101');
	const visible = ref(false);
	const show = ref(false);
	const Index = ref(0);

	onBeforeMount(() => {
		user_base_info()
	})


	const user_base_info = () => {
		Http.get({
			url: '/WeddingApi/user_base_info',
			data: {
				times: props.times
			}
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			const result = res.data.list || [];
			result.forEach((item, index) => {
				if (item.vpType == 3 && item.vpValue) {
					item.vpValueList = item.vpValue.split('\n')
				}
				if (item.vpType == 4 && item.vpValue && !item.value) {
					item.valueList = [];
				}
				if (item.vpType == 4 && item.vpValue && item.value) {
					item.valueList = item.value.split(',');
				}
				if (item.vpType == 8 && item.vpValue) {
					item.Imgs = item.vpValue.split(',')
				}
				if (item.vpType == 8 && !item.vpValue) {
					item.Imgs = []
				}
			})
			pageData.value = result;
		})
	}


	const Picker = (e, item) => {
		let Index = pageData.value.findIndex((n) => n.vpId == item.vpId);
		let every = e.detail.value;
		if (item.vpType == 2) pageData.value[Index].value = pageData.value[Index].vpValue[every];
		if (item.vpType == 5) pageData.value[Index].value = every;
	}


	const showAddPicker = (index, sItem) => {
		showadd.value = index;
		if (sItem.code) defaultValue.value = sItem.code;
		visible.value = true;
	}

	const confirm = (e) => {
		visible.value = false;
		pageData.value[showadd.value].value = e.name;
		pageData.value[showadd.value].code = e.code;
	}


	const UploadPhoto = async (index, vpType) => {
		if (vpType == 7) {
			const Photo = await common.chooseImage(1);
			if (!Photo.length) return;
			pageData.value[index].Imgs = pageData.value[index].Imgs.concat(Photo);
			pageData.value[index].value = Photo.join('');
		}
		if (vpType == 8) {
			let num = 9 - pageData.value[index].Imgs.length;
			const Photo = await common.chooseImage(num);
			if (!Photo.length) return;
			pageData.value[index].Imgs = pageData.value[index].Imgs.concat(Photo);
			pageData.value[index].value = pageData.value[index].Imgs.join(',');
		}
	}

	const DelImg = (index, sIndex) => {
		pageData.value[index].Imgs.splice(sIndex, 1);
	}


	const PopMore = (index) => {
		Index.value = index;
		show.value = true;
	}

	const selectINT = (item) => {
		const result = pageData.value[Index.value];
		const Flag = result.valueList.includes(item);
		if (Flag) {
			let soury = result.valueList.findIndex((n) => n == item);
			result.valueList.splice(soury, 1)
		} else {
			result.valueList.push(item)
		}
		result.value = result.valueList.join(',')
	}

	watch(() => props.times, (newVal, oldVal) => {
		if (newVal) user_base_info();
	})

	defineExpose({
		pageData
	})
</script>

<style lang="scss" scoped>
	.list,
	.sele_list,
	.listBot {
		width: 100%;
		height: 88rpx;
		padding: 0 24rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		box-sizing: border-box;
	}

	.list,
	.sele_list,
	.textarea {
		margin-bottom: 30rpx;
	}

	.picker {
		width: 100%;
		height: 88rpx;
		margin-bottom: 30rpx;
	}

	.name {
		color: #000;
		font-weight: bold;
		font-size: 30rpx;
	}

	.Input {
		flex: 1;
		height: 100%;
		text-align: right;
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #000;
	}




	.listContent {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.contentTxt {
		padding: 0 24rpx 10rpx 24rpx;
	}


	.Photos {
		width: 100%;
		padding: 24rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		position: relative;
		box-sizing: border-box;
	}

	.rowList {
		width: 30%;
		margin-right: 4.8%;
	}

	.rowList:nth-child(3n) {
		margin-right: 0;
	}

	.LitImg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		position: relative;
	}

	.LitImg::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #cccccc;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: left top;
		-webkit-transform-origin: left top;
		border-radius: 20rpx;
	}

	.icon-shanchu1 {
		position: absolute;
		background-color: #ffffff;
		top: -12rpx;
		right: -12rpx;
		z-index: 10;
		border-radius: 50%;
	}

	.PopUp {
		width: 100%;
		padding: 30rpx 0 40rpx 0;
		display: flex;
		flex-direction: column;
	}

	.popList {
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		background-color: #f2f2f2;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.popActive {
		color: #ffffff;
		background-color: $themeColor;
	}
</style>